<template>
  <div class="goods-grid">
    <div
      v-for="good in goods"
      :key="good.id"
      class="goods-item"
      @click="goToDetailPage(good.id)"
    >
      <img :src="good.imgPath" :alt="good.name" class="goods-img" />
      <p class="good-blurb">{{ good.blurb }}</p>
      <p class="good-price">{{ good.price }}</p>
      <p class="good-createUser">{{ good.createUser }}</p>
      <p class="good-createTime">{{ good.createTime }}</p>
    </div>
    <div v-if="goods.length === 0" class="no-goods-found">
      找不到相关商品，请尝试其它搜索词。
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
import '../css/goods.css'

const props = defineProps<{
  goods: {
    id: number;
    name: string;
    imgPath: string;
    price: number;
    blurb: string;
    createUser: string;
    createTime: string;
  }[];
}>();

const router = useRouter();

const goToDetailPage = (id: number) => {
  router.push({ path: `/goods/${id}` });
};
</script>
